<template>
	<view>
		<form class="form" @submit="submitForm">
			<view class="cu-form-group item avatar">
				<view class="title">企业LOGO</view>
				<image class="cu-avatar  " v-show="data.logo" @click="chooseImage" :src="data.logo" mode="">
				</image>
				<image class="cu-avatar  " v-show="!data.logo" @click="chooseImage" src="/static/images/userdef.png"
					mode=""></image>
			</view>
			<view class="cu-form-group item">
				<view class="title">企业名称</view>
				<input class="inp" placeholder="请输入企业名称" v-model="data.name" name="name"/>
			</view>
			<view class="cu-form-group item">
				<view class="title">我的职务：</view>
				<input class="inp" placeholder="请输入我的职务：" v-model="data.job"  name="job"></input>

			</view>
			<view class="cu-form-group item">
				<view class="title">所属行业：</view>
				<input class="inp" placeholder="请输入所属行业" v-model="data.profession"  name="profession"></input>

			</view>
<!-- @click="chooseLocation" -->
			<view class="cu-form-group item" >
				<view class="title">公司地址：</view>
				<addressChoice @change="addressChange" ></addressChoice>
				 <input class="inp" placeholder="请输入公司详细地址"  @blur="addressBlur" v-model="data.address" name="address"></input>
			</view>
			<view class="cu-form-group item ">

				<view class="title">上传宣传视频</view>
				<view class="subtitle">
					建议上传视频格式为MP4 大小不超过20M。
				</view>
				<view class="flex fileBox">
					<view class="addimg promotional_video" v-show="data.promotional_video">
						<image class="colse" @click.stop="delVideo" src="/static/images/colse.png" mode=""></image>
						<video :src="data.promotional_video" class="bg" mode=""></video>
					</view>
					<view class="addimg" @click="upVideo">
						<image class="icon imgcentent" src="/static/images/addimg.png" mode=""></image>
					</view>
				</view>

				<upItem title="上传企业风采" @changeList="changeImageSList" :listData="data.images"></upItem>
				<upItem title="上传营业执照" @changeList="changeCertificateList" :listData="data.certificate"></upItem>
				<goods @changProduct="changProduct" :listData="data.product"></goods>

				<view class="title">
					<text>企业相关文档</text>
					<text class="tag" @click="addwps">+添加</text>
				</view>
				<view class="subtitle">
					建议上传文档格式为pdf,大小不超过40M。
				</view>
				<view class="pdfList" v-if="data.wps">
					<view class="item spaceBetween" v-for="i,index in data.wps">
						<text class="name ellipsis">{{i}}</text>
						<image class="icon" @click="delwps(index)" src="/static/images/colse.png" mode=""></image>
					</view>
				</view>
			</view>

			<view class="opt centerSubElements">
				<button form-type="submit" class="btn btnview">确认提交</button>
			</view>
		</form>
		<cut-component @callback="callback" ref="cut"></cut-component>
	</view>
</template>

<script>
	import cutComponent from '@/components/my/cut-component/cut-component.vue'
	import upItem from "./upItem.vue"
	import goods from "./goods.vue"
	import addressChoice from "@/components/my/card/addressChoice/addressChoice.vue"
	import {
		chous
	} from "../mixins.js"
	import {
		checkPhone,
		emailReg
	} from "@/utils/regular.js"

	export default {
		name: "personalData",
		mixins: [chous],
		components: {
			cutComponent,
			upItem,
			goods,
			addressChoice
		},
		watch:{
			fromData(newVal) {
				this.data = newVal
			}
		},
		data() {
			return {
				data: {
					logo: null,
					name: null,
					job: null,
					profession: null,
					address: null,
					promotional_video: null,
					images: null,
					certificate: null,
					product: null,
					wps: null,
					province:null,
					city:null,
					district:null,
				},
				wpsList:null,
			};
		},
		methods: {
			delVideo(){
				this.data.promotional_video=null
			},
			addressChange(e){
				// Object.assign(this.data,e) 
				this.data.province=e.province;
				this.data.city=e.city;
				this.data.district=e.district;
			},
			delwps(index){
				this.data.wps.splice(index, 1);
			},
			async addwps() {
				const res = await this.$api.upload('workWps')
				this.data.wps =Array.isArray(this.data.wps)?[...this.data.wps,res.uri] :[res.uri]
				this.wpsList =Array.isArray(this.wpsList)?[...this.wpsList,res] :[res]
			},
			changProduct(list) {
				this.data.product = list;
			},
			// 
			changeImageSList(list) {
				this.data.images = list;
			},
			changeCertificateList(list) {
				this.data.certificate = list;
			},
			// 
			async upVideo() {
				const res = await this.$api.upload('video')
				this.data.promotional_video = res.uri
			},
			// 
			async callback(e) {
				const res = await this.$api.UploadImage({
					filePath: e,
				})
				this.data.logo = JSON.parse(res).data.uri
			},
			async addressBlur(e){
			if(e.detail.value=='' || !e.detail.value){
				return
			}
			const address=this.data.province+this.data.city+this.data.district+e.detail.value;
				 try {
				     const res = await this.$api.geolatitudeAndlongitude({address})
				     this.data.latitude=res.data.location.lat;
				     this.data.longitude=res.data.location.lng;
				   } catch (error) {
				    
				   } 
			},
			async submitForm(e) {
				const data = Object.assign({},  this.data,e.detail.value) 
				if (!this.check()) return
			
				if(this.data.fill_status==0){
					const res = await this.$api.CardBusinessEnterpriseAdd(data)
				}else{
					const res = await this.$api.CardBusinessEdit(data)
				}
				uni.setStorageSync("enterprise", data)
				this.$emit('next',2)
			},
			// 校验
			check() {
				// if (!checkPhone(this.data.telephone)) return false;
				// console.log(this.data)
				// if (!emailReg(this.data.email)) return false;
				return true
			}
		}
	}
</script>

<style lang="scss" scoped>
	.form {
		width: 100%;
		display: block;
		background-color: $content-bg-colcor;
		overflow: hidden;
		margin-top: 60rpx;

		.avatar {
			display: flex;
			justify-content: space-between;
			padding-bottom: $submargin-width;

			.cu-avatar {
				width: 120rpx;
				height: 120rpx;
			}
		}

		.item {
			width: $connet-width ;
			margin: 0 auto;
			// line-height: 90rpx;
			border-bottom: 1rpx solid #DDDDDD;

			.title {
				font-size: $uni-font-size-12;
				margin: 30rpx 0 20rpx;
				overflow: hidden;

				.tag {
					float: right;
					font-size: $uni-font-size-10;
					background:$price-color;
					color: #fff;
					padding: 10rpx;
					border-radius: calc(10px + 10rpx);
				}
			}
			.placeholder{
				color: #666666;
			}
			.subtitle {
				color: #999999;
				font-size: $uni-font-size-10;
				margin-bottom: 20rpx;
			}
			.pdfList{
				width: $connet-width;
				.item{
					align-items: center;
					.name{
						display: block;
						text-align: left;
						margin: 0;
						max-width: 500rpx;
						padding: $submargin-width 0;
						font-size: $uni-font-size-12;
						border-bottom: none;
					}
					.icon{
						display: block;
						width: 30rpx;
						height: 30rpx;
					}
				}
			}
			.addimg {
				width: 200rpx;
				height: 150rpx;
				background: #F5F5F5;
				position: relative;
				margin-bottom: $submargin-width;

				.icon {

					width: 41.9rpx;
					height: 41.9rpx;
				}
			}

			.fileBox {
				flex-wrap: wrap;
				position: relative;

				.colse {
					width: 30rpx;
					height: 30rpx;
					position: absolute;
					top: 10rpx;
					right: 10rpx;
					z-index: 2;
				}

				.promotional_video {
					position: relative;
					margin-right: $margin-width;

				}
			}

			.inp {
				// text-align: right;
				font-size: $uni-font-size-17;
				width: 100%;
				margin-bottom: 30rpx;
				padding: 0;
			}

			.cuIcon-right {
				color: $unselected;
			}
		}

		.opt {
			position: fixed;
			bottom: calc(var(--window-bottom) + 20rpx);
			left: 0;
			z-index: 5;
			// height: 146rpx;
			width: 100%;
			// border-top: 1rpx solid #DDDDDD;

			.btn {
				border-radius: 40rpx;
				width: 690rpx;
				height: 80rpx;
				font-size: $uni-font-size-15;
				line-height: 80rpx;
			}
		}
	}
</style>